<template>
  <div class="pageBox" ref="pageBox">
    <img src="@/image/header/backIcon.png" class="back" alt="" @click="$router.go(-1)">
    <div class="main flex-center">
      <img class="avatar" :src="shareData.avatar" alt="" />
      <div class="title">您的邀请码</div>
      <div class="inviteCode">{{ shareData.inviteCode }}</div>
      <button class="copy" @click="onCopy">复制</button>
      <div class="line"></div>
      <div class="qrBox">
        <qrcode-vue :value="value" :size="size" :margin="2" level="H" />
      </div>
    </div>
    <button class="shareBtn" @click="onShareBtn">分享海报</button>
  </div>
</template>

<script type="text/ecmascript-6">
import { defineComponent, ref } from "vue";
import QrcodeVue from "qrcode.vue";
import { post } from "../../untils/request";
import useClipboard from "vue-clipboard3";
import { Toast } from "vant";
import { saveDomImage } from "../../untils/saveImg";

export default defineComponent({
  components: { QrcodeVue },
  setup() {
    const value = ref("");
    const size = ref(200);

    const pageBox = ref(null);

    const shareData = ref({});

    function getData() {
      post("/portal", {
        module: "User",
        interface: "9001",
      }).then((res) => {
        console.log("分享", res);
        shareData.value = res.data;
        value.value =
          process.env.VUE_APP_URL +
          "/h5/#/register?inviteCode=" +
          res.data.inviteCode;
      });
    }
    getData();

    // 复制
    async function onCopy() {
      const { toClipboard } = useClipboard();
      try {
        await toClipboard(shareData.value.inviteCode);
        Toast.success("复制成功");
      } catch (e) {
        Toast.fail(e);
      }
    }

    function onShareBtn() {
      saveDomImage(pageBox.value);
    }

    return {
      value,
      size,
      shareData,
      pageBox,
      getData,
      onCopy,
      onShareBtn,
    };
  },
});
</script>

<style scoped lang="less">
.pageBox {
  width: 100%;
  min-height: 100vh;
  background-image: url("~@/image/my/shareBg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-top: 489px;
  padding-bottom: 111px;
  position: relative;
  .back {
    width: 40px;
    height: 44px;
    position: absolute;
    left: 30px;
    top: 30px;
  }
  .main {
    width: 631px;
    height: 890px;
    background-image: url("~@/image/my/shareMainBg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    padding-top: 40px;
    justify-content: flex-start;
    flex-direction: column;
    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
    }
    .title {
      font-size: 26px;
      font-weight: 400;
      color: #999999;
      margin-top: 30px;
    }
    .inviteCode {
      font-size: 40px;
      font-weight: 500;
      color: #303133;
      margin-top: 6px;
    }
    .copy {
      font-size: 28px;
      font-weight: 400;
      color: #ffffff;
      width: 160px;
      height: 56px;
      background: linear-gradient(270deg, #b30b11 0%, #f50811 100%);
      border-radius: 4px;
      border: none;
      margin-top: 30px;
    }
    .line {
      width: 502px;
      height: 1px;
      border: 2px solid #fa4b5a;
      margin-top: 43px;
    }
    .qrBox {
      width: 400px;
      height: 400px;
      background-color: #ffffff;
      margin-top: 40px;
    }
  }
  .shareBtn {
    width: 630px;
    height: 88px;
    background: linear-gradient(271deg, #ffffff 0%, #fdd2d6 100%);
    box-shadow: 0px 6px 16px 0px rgba(227, 64, 78, 0.9);
    border-radius: 10px;
    font-size: 32px;
    font-weight: 500;
    color: #e00b12;
    border: none;
    display: block;
    margin: 20px auto 0;
  }
}
</style>